<script lang="ts" setup>

interface IProps {
	show: boolean;
	title: string;
	loading?: boolean;
	confirmText?: string;
	cancelText?: string;
	width?: number | string;

	[key: string]: any
}

const emits = defineEmits(['confirm', 'cancel', 'close', 'update:show'])
const props = withDefaults(defineProps<IProps>(), {
	confirmText: '确定',
	cancelText: '取消',
	width: 500
})
const btnProps = {size: 'medium', style: {paddingLeft: '20px', paddingRight: '20px'}};

function onUpdateShow(show: boolean) {
	emits('update:show', show)
}
</script>

<template>
	<n-modal
		:loading="loading"
		:mask-closable="true"
		:negative-button-props="btnProps"
		:negative-text="cancelText"
		:positive-button-props="btnProps"
		:positive-text="confirmText"
		:show="show"
		:style="`width: ${width}px`"
		:title="title"
		preset="dialog"
		@update-show="onUpdateShow"
		@close="()=>{
        if(!loading){
          emits('close')
        }
      }"
		@positive-click="emits('confirm')"
		@update:show="emits('update:show',showModal)"
		@negative-click="()=>{
        if(!loading){
          emits('cancel')
        }
      }"
	>
		<div class="content">
			<slot/>
		</div>
	</n-modal>
</template>
<style lang="less">
.content {
	padding-top: 20px;
}
</style>
